<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrickyAddon</title>
    <link rel="stylesheet" href="./styles/global.css" type="text/css">
    <script type="module" crossorigin src="./scripts/main.js"></script>
    <script type="module" crossorigin src="./scripts/about.js"></script>
    <script type="module" crossorigin src="./scripts/boot_hash.js"></script>
    <script type="module" crossorigin src="./scripts/security_patch.js"></script>
</head>
<body>
    <!-- Header -->
    <div class="header header-bg" unresolved>
        <div id="title" class="search-bg" data-i18n="header_title"></div>
        <md-icon-button class="search-button search-bg" id="search-button">
            <md-icon>search</md-icon>
        </md-icon-button>
        <div class="menu">
            <md-icon-button id="menu-button">
                <md-icon>more_vert</md-icon>
            </md-icon-button>
            <md-menu id="menu-options" anchor="menu-button">
                <div class="menu-item-button-container">
                    <md-filled-tonal-icon-button id="select-all"><md-icon>select_all</md-icon></md-filled-tonal-icon-button>
                    <md-filled-tonal-icon-button id="deselect-all"><md-icon>deselect</md-icon></md-filled-tonal-icon-button>
                    <md-filled-tonal-icon-button id="refresh"><md-icon>refresh</md-icon></md-filled-tonal-icon-button>
                </div>
                <md-menu-item id="select-denylist" data-i18n="menu_select_denylist"></md-menu-item>
                <md-menu-item id="deselect-unnecessary" data-i18n="menu_deselect_unnecessary"></md-menu-item>
                <md-menu-item id="add-system-app" data-i18n="menu_add_system_app"></md-menu-item>
                <md-divider role="separator" tabindex="-1"></md-divider>
                <md-sub-menu hover-close-delay="0">
                    <md-menu-item slot="item" class="sub-menu-entry">
                        <div slot="headline" data-i18n="menu_keybox"></div>
                        <md-icon slot="start" class="ltr-icon">chevron_left</md-icon>
                        <md-icon slot="start" class="rtl-icon">chevron_right</md-icon>
                    </md-menu-item>
                    <md-menu positioning="popover" slot="menu">
                        <md-menu-item id="aospkb" data-i18n="menu_keybox_aosp"></md-menu-item>
                        <md-menu-item id="validkb" data-i18n="menu_keybox_valid"></md-menu-item>
                        <md-menu-item id="devicekb" data-i18n="menu_keybox_unknown"></md-menu-item>
                        <md-menu-item id="customkb" data-i18n="menu_keybox_custom"></md-menu-item>
                    </md-menu>
                </md-sub-menu>
                <md-menu-item id="boot-hash" data-i18n="menu_set_verified_boot_hash"></md-menu-item>
                <md-menu-item id="security-patch" data-i18n="menu_set_security_patch"></md-menu-item>
                <md-divider role="separator" tabindex="-1"></md-divider>
                <md-menu-item id="help" data-i18n="menu_help"></md-menu-item>
                <md-sub-menu hover-close-delay="0">
                    <md-menu-item slot="item" class="sub-menu-entry">
                        <div slot="headline" data-i18n="menu_language"></div>
                        <md-icon slot="end">language</md-icon>
                    </md-menu-item>
                    <md-menu positioning="popover" slot="menu" id="language-menu"></md-menu>
                </md-sub-menu>
                <md-menu-item id="about" data-i18n="menu_about"></md-menu-item>
            </md-menu>
        </div>
        <md-outlined-text-field class="search-input" id="search" data-i18n="search_bar_search_placeholder" placeholder="Search">
            <md-icon slot="trailing-icon" id="clear-btn">close</md-icon>
        </md-outlined-text-field>
    </div>

    <!-- Loading Element -->
    <div class="loading" data-i18n="loading_loading"></div>

    <!-- Prompt Element -->
    <div class="prompt-container" popover="manual">
        <span class="prompt" id="prompt"></span>
    </div>

    <!-- Floating Button Element -->
    <md-fab id="save" class="floating-btn hide" data-i18n="functional_button_save" label="Save">
        <md-icon slot="icon">edit_note</md-icon>
    </md-fab>

    <!-- Applist Display -->
    <div id="apps-list"></div>
    <div class="update-card" id="update-card">
        <md-ripple></md-ripple>
        <md-icon>download</md-icon>
        <div>
            <div id="update-available" data-i18n="update_update_available"></div>
            <div id="redirect-to-release" data-i18n="update_redirect_to_release"></div>
        </div>
    </div>
    <template id="app-template">
        <div class="card-box">
            <div class="card card-alpha content" data-package="">
                <md-ripple></md-ripple>
                <label class="name"></label>
                <md-checkbox class="checkbox" touch-target="wrapper"></md-checkbox>
            </div>
        </div>
    </template>

    <!-- Dialog -->
    <div class="dialog-wrapper" unresolved>
        <!-- Mode selection dialog (opened on long-press) -->
        <md-dialog id="mode-dialog">
            <div slot="headline" data-i18n="mode_dialog_title"></div>
            <div slot="content" class="mode-dialog-content">
                <div id="mode-dialog-appname"></div>
                <div class="mode-options">
                    <label class="mode-option">
                        <md-radio id="mode-default" name="mode" value="normal"></md-radio>
                        <span data-i18n="mode_auto"></span>
                    </label>
                    <label class="mode-option">
                        <md-radio id="mode-generate" name="mode" value="generate" class="mode-generated"></md-radio>
                        <span data-i18n="mode_certificate_generating"></span>
                    </label>
                    <label class="mode-option">
                        <md-radio id="mode-hack" name="mode" value="hack" class="mode-hack"></md-radio>
                        <span data-i18n="mode_leaf_hack"></span>
                    </label>
                </div>
            </div>
            <div slot="actions">
                <md-text-button id="mode-cancel" data-i18n="functional_button_cancel"></md-text-button>
            </div>
        </md-dialog>

        <!-- Help Dialog -->
        <md-dialog id="help-dialog">
            <div slot="headline" data-i18n="help_help_instructions"></div>
            <div slot="content" class="help-content">
                <div class="instruction">
                    <p class="instruction-header" data-i18n="functional_button_save"></p>
                    <p data-i18n="help_save_and_update_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_select_denylist"></p>
                    <p data-i18n="help_select_denylist_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_deselect_unnecessary"></p>
                    <p data-i18n="help_deselect_unnecessary_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_add_system_app"></p>
                    <p data-i18n="help_add_system_app_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_set_keybox"></p>
                    <p data-i18n="help_set_keybox_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_set_custom_keybox"></p>
                    <p data-i18n="help_set_custom_keybox_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_set_security_patch"></p>
                    <p data-i18n="help_set_security_patch_description"></p>
                </div>
                <div class="instruction">
                    <p class="instruction-header" data-i18n="help_set_verified_boot_hash"></p>
                    <p data-i18n="help_set_verified_boot_hash_description"></p>
                </div>
            </div>
            <div slot="actions">
                <md-text-button id="close-help" data-i18n="functional_button_close"></md-text-button>
            </div>
        </md-dialog>

        <!-- BootHash Input Dialog -->
        <md-dialog id="boot-hash-dialog" class="text-field-dialog">
            <div slot="headline" data-i18n="boot_hash_title"></div>
            <div slot="content">
                <md-outlined-text-field id="boot-hash-input" type="textarea" rows="4" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash_input_placeholder" oninput="window.trimInput(this)"></md-outlined-text-field>
            </div>
            <div slot="actions">
                <md-text-button id="cancel-boot-hash" data-i18n="functional_button_cancel"></md-text-button>
                <md-filled-button id="boot-hash-save-button" data-i18n="functional_button_save"></md-filled-button>
            </div>
        </md-dialog>

        <!-- About Dialog -->
        <md-dialog id="about-dialog">
            <div slot="headline" class="about-headline">
                <div id="module_name_line1" data-i18n="about_module_name_line1"></div>
                <div id="module_name_line2" data-i18n="about_module_name_line2"></div>
                <div id="module-version"></div>
                <div id="author"><span id="authored" data-i18n="about_by"></span> KOWX712</div>
            </div>
            <div slot="content">
                <div id="disclaimer" data-i18n="about_disclaimer"></div>
                <div class="link">
                    <md-filled-button id="telegram">
                        <span data-i18n="about_telegram_channel"></span>
                        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.114 9.291c.552-.552 1.1-1.84-1.2-.276a395.806 395.806 0 0 1-6.489 4.372 2.7 2.7 0 0 1-2.117.046c-1.38-.414-2.991-.966-2.991-.966s-1.1-.691.783-1.427c0 0 7.961-3.267 10.722-4.418 1.058-.46 4.647-1.932 4.647-1.932s1.657-.645 1.519.92c-.046.644-.414 2.9-.782 5.338-.553 3.451-1.151 7.225-1.151 7.225s-.092 1.058-.874 1.242a3.787 3.787 0 0 1-2.3-.828c-.184-.138-3.451-2.209-4.648-3.221a.872.872 0 0 1 .046-1.473 169.31 169.31 0 0 0 4.835-4.602Z"></path></svg>
                    </md-filled-button>
                    <md-filled-button id="github">
                        <span>GitHub</span>
                        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1A10.89 10.89 0 0 0 1 11.77 10.79 10.79 0 0 0 8.52 22c.55.1.75-.23.75-.52v-1.83c-3.06.65-3.71-1.44-3.71-1.44a2.86 2.86 0 0 0-1.22-1.58c-1-.66.08-.65.08-.65a2.31 2.31 0 0 1 1.68 1.11 2.37 2.37 0 0 0 3.2.89 2.33 2.33 0 0 1 .7-1.44c-2.44-.27-5-1.19-5-5.32a4.15 4.15 0 0 1 1.11-2.91 3.78 3.78 0 0 1 .11-2.84s.93-.29 3 1.1a10.68 10.68 0 0 1 5.5 0c2.1-1.39 3-1.1 3-1.1a3.78 3.78 0 0 1 .11 2.84A4.15 4.15 0 0 1 19 11.2c0 4.14-2.58 5.05-5 5.32a2.5 2.5 0 0 1 .75 2v2.95c0 .35.2.63.75.52A10.8 10.8 0 0 0 23 11.77 10.89 10.89 0 0 0 12 1"></path></svg>
                    </md-filled-button>
                    <md-filled-button id="canary">
                        <span data-i18n="about_canary_update"></span>
                        <md-icon slot="icon">science</md-icon>
                    </md-filled-button>
                    <md-filled-button id="locales">
                        <span data-i18n="about_translation_update"></span>
                        <md-icon slot="icon">translate</md-icon>
                    </md-filled-button>
                </div>
                <div class="acknowledgment">
                    <p id="acknowledgment" data-i18n="about_acknowledgment"></p>
                    <p>j-hc/zygisk-detach: WebUI template</p>
                    <p>markedjs/marked: Markdown Support</p>
                </div>
            </div>
            <div slot="actions">
                <md-text-button id="close-about" data-i18n="functional_button_close"></md-text-button>
            </div>
        </md-dialog>

        <!-- Update Dialog -->
        <md-dialog id="update-dialog" class="update-dialog">
            <div slot="headline" data-i18n="update_changelog"></div>
            <div slot="content" class="changelog"></div>
            <div slot="actions">
                <md-text-button id="close-update" data-i18n="functional_button_close"></md-text-button>
                <md-filled-button class="install" data-i18n="update_install"></md-filled-button>
                <md-filled-button class="reboot" data-i18n="update_reboot"></md-filled-button>
            </div>
        </md-dialog>

        <!-- File Selector Dialog -->
        <md-dialog id="file-selector-dialog">
            <div slot="headline" class="file-selector-header">
                <md-icon-button class="back-button">
                    <md-icon>arrow_back</md-icon>
                </md-icon-button>
                <div class="current-path">/storage/emulated/0/Download</div>
            </div>
            <div slot="content">
                <div class="file-list"></div>
            </div>
            <div slot="actions">
                <md-text-button class="close-selector" data-i18n="functional_button_cancel"></md-text-button>
            </div>
        </md-dialog>

        <!-- Security Patch Dialog -->
        <md-dialog id="security-patch-dialog" class="text-field-dialog">
            <div slot="headline" data-i18n="security_patch_title"></div>
            <div slot="content">
                <!-- Usual input -->
                <div id="normal-mode-inputs" class="normal-mode-inputs input-group">
                    <md-outlined-text-field id="all-patch" label="All" placeholder="20250101" maxlength="8" autocapitalize="none"></md-outlined-text-field>
                </div>

                <!-- Advanced input -->
                <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden input-group">
                    <md-outlined-text-field id="system-patch" label="System" placeholder="202501" maxlength="6" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="boot-patch" label="Boot" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this)" maxlength="10"></md-outlined-text-field>
                    <md-outlined-text-field id="vendor-patch" label="Vendor" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this)" maxlength="10"></md-outlined-text-field>
                </div>

                <!-- James' fork input -->
                <div id="devconfig-mode-inputs" class="normal-mode-inputs hidden">
                    <md-outlined-text-field id="devconfig-securityPatch" label="Security Patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this)" maxlength="10"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-osVersion" label="OS Version" placeholder="34" maxlength="2" autocapitalize="none"></md-outlined-text-field>
                    <br>
                    <label>Device Property</label>
                    <md-outlined-text-field id="devconfig-brand" label="brand" placeholder="google" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-device" label="device" placeholder="oriole" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-product" label="product" placeholder="oriole_beta" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-manufacturer" label="manufacturer" placeholder="Google" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-model" label="model" placeholder="Pixel 6" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-serial" label="serial" placeholder="5e043839" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-meid" label="meid" placeholder="32b6af4d93aca6" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-imei" label="imei" placeholder="73598126407" autocapitalize="none"></md-outlined-text-field>
                    <md-outlined-text-field id="devconfig-imei2" label="imei2" placeholder="77983102465" autocapitalize="none"></md-outlined-text-field>
                </div>

                <!-- Advanced Toggle -->
                <div class="advanced-toggle">
                    <md-checkbox id="advanced-mode"></md-checkbox>
                    <label for="advanced-mode" data-i18n="security_patch_advanced_mode"></label>
                </div>
            </div>
            <div class="security-patch-actions" slot="actions">
                <md-outlined-button id="get-patch" data-i18n="security_patch_get_date"></md-outlined-button>
                <md-outlined-button id="auto-config" data-i18n="security_patch_auto"></md-outlined-button>
                <md-filled-button id="save-patch" data-i18n="functional_button_save"></md-filled-button>
            </div>
        </md-dialog>

        <!-- Add System App Dialog -->
        <md-dialog id="add-system-app-dialog" class="text-field-dialog">
            <div slot="headline" data-i18n="add_system_app_title"></div>
            <div slot="content">
                <md-outlined-text-field id="system-app-input" placeholder="com.example.app" autocapitalize="none"></md-outlined-text-field>
                <h3 class="current-system-app-list" data-i18n="add_system_app_current_list"></h3>
                <div class="current-system-app-list-content"></div>
            </div>
            <div slot="actions">
                <md-text-button id="cancel-add-system-app" data-i18n="functional_button_cancel"></md-text-button>
                <md-filled-button id="add-system-app-button" data-i18n="add_system_app_add"></md-filled-button>
            </div>
        </md-dialog>

        <!-- Uninstall Confirmation Dialog -->
        <md-dialog id="uninstall-confirmation-dialog" type="alert">
            <div slot="headline" data-i18n="confirmation_uninstall_title"></div>
            <md-icon slot="icon">delete</md-icon>
            <div slot="content" data-i18n="confirmation_uninstall_message"></div>
            <div slot="actions">
                <md-text-button id="cancel-uninstall" data-i18n="functional_button_cancel"></md-text-button>
                <md-filled-button id="confirm-uninstall" data-i18n="functional_button_confirm"></md-filled-button>
            </div>
        </md-dialog>
    </div>

    <!-- Footer -->
    <div class="footer">
        <md-filled-button class="uninstall-container">
            <md-icon slot="icon">delete</md-icon>
            <span data-i18n="functional_button_uninstall_webui"></span>
        </md-filled-button>
    </div>
</body>
</html>
